<template>
  <div class="faultLibInfo">
    <div class="app-container">
      <basic-container class="view" v-if="isView">
        <div>
          <div class="lxjgz">
            <div class="tt">
              <div class="title">经验详情</div>
            </div>
            <p class="gnTitle">离心机故障</p>
            <div class="content" style="margin: 10px 0px;">
              <table border="1" align="center">
                <tr>
                  <td>故障名称</td>
                  <td class="subData" colspan="3">
                    {{ faultLibForm.faultName }}
                  </td>
                </tr>
                <tr>
                  <td>编号</td>
                  <td class="subData">
                    {{ faultLibForm.faultNumber }}
                  </td>
                  <td>添加时间</td>
                  <td class="subData">
                    {{ faultLibForm.createTime }}
                  </td>
                </tr>
                <tr>
                  <td>适用公司</td>
                  <td class="subData">
                    {{ faultLibForm.deptName }}
                  </td>
                  <td>故障类型</td>
                  <td class="subData">
                    {{ faultLibForm.faultCategoryName }}
                  </td>
                </tr>
                <tr>
                  <td>故障原因</td>
                  <td class="subData">
                    {{ faultLibForm.faultCause }}
                  </td>
                  <td>设备类别</td>
                  <td class="subData">
                    {{ getDeviceCtgFun(faultLibForm.devicesArray) }}
                  </td>
                </tr>
                <tr>
                  <td>故障现象</td>
                  <td class="subData" colspan="3">
                    {{ faultLibForm.faultPhenomenon }}
                  </td>
                </tr>
                <tr>
                  <td>故障部位</td>
                  <td class="subData" colspan="3">
                    {{ faultLibForm.position }}
                  </td>
                </tr>
                <tr>
                  <td>解决方法</td>
                  <td class="subData" colspan="3">
                    {{ faultLibForm.solution }}
                  </td>
                </tr>
                <tr>
                  <td>预防对策</td>
                  <td class="subData" colspan="3">
                    {{ faultLibForm.prevention }}
                  </td>
                </tr>
              </table>
            </div>
          </div>
          <div class="xgfj">
            <p class="gnTitle">相关附件</p>
            <el-table
                    :data="faultLibForm.filesArray"
                    border
                    style="width: 100%">
              <el-table-column
                      header-align="center"
                      align="center"
                      prop="original"
                      label="文件名称">
              </el-table-column>
              <el-table-column
                      header-align="center"
                      align="center"
                      prop="type"
                      label="文件类型">
              </el-table-column>
              <el-table-column
                      header-align="center"
                      align="center"
                      label="文件大小">
                <template slot-scope="scope">
                  <div>{{(Number(scope.row.fileSize)/1024).toFixed(2)}}KB</div>
                </template>
              </el-table-column>
              <el-table-column
                      header-align="center"
                      align="center"
                      prop="delFlag"
                      label="查看次数">
              </el-table-column>
              <el-table-column
                      header-align="center"
                      align="center"
                      prop="delFlag"
                      label="下载次数">
              </el-table-column>
              <el-table-column
                      header-align="center"
                      align="center"
                      prop="updateTime"
                      label="上传时间">
              </el-table-column>
              <el-table-column
                      header-align="center"
                      align="center"
                      label="下载">
                <template slot-scope="scope">
                  <el-button @click="downloadFun(scope.row)" type="text"  icon="el-icon-download"  size="small">下载</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="sysb">
            <p class="gnTitle">适用设备</p>
            <el-table
                    :data="faultLibForm.devicesArray"
                    border
                    style="width: 100%">
              <el-table-column
                      type="index"
                      width="50">
              </el-table-column>
              <el-table-column
                      header-align="center"
                      align="center"
                      prop="deviceNum"
                      label="设备编号">
              </el-table-column>
              <el-table-column
                      header-align="center"
                      align="center"
                      prop="deviceName"
                      label="设备名称">
              </el-table-column>
              <el-table-column
                      header-align="center"
                      align="center"
                      prop="brandName"
                      label="品牌">
              </el-table-column>
              <el-table-column
                      header-align="center"
                      align="center"
                      prop="category"
                      label="类别">
              </el-table-column>
              <el-table-column
                      header-align="center"
                      align="center"
                      prop="specification"
                      label="规格型号">
              </el-table-column>
              <el-table-column
                      header-align="center"
                      align="center"
                      prop="location"
                      label="位置">
              </el-table-column>
              <el-table-column
                      header-align="center"
                      align="center"
                      prop="remark"
                      label="备注">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </basic-container>
      <basic-container class="edit" v-else>
          <el-form
                  ref="faultLibForm"
                  :model="faultLibForm"
                  label-width="100px"
          >
            <el-row>
             <!-- <el-col :span="12">
                <el-form-item label="故障编号">
                  <el-input v-model="faultLibForm.faultNumber" type="text"/>
                </el-form-item>
              </el-col>-->
              <el-col :span="24">
                <el-form-item label="故障名称">
                  <el-input v-model="faultLibForm.faultName" type="text"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="适用设备类别">
                  <avue-input-tree
                          style="width: 100%"
                          v-model="faultLibForm.applicableDeviceCategory"
                          :node-click="getCtgNodeData"
                          :dic="fetchDevicecategoryTreeArr"
                          :props="defaultCtgProps"
                          placeholder="请选择适用设备类别"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="适用设备">
                  <avue-select all multiple :props="deviceProps" style="width: 100%" v-model="faultLibForm.deviceIdsArray" placeholder="请选择内容" type="select" :dic="emsdeviceaccountPageArr"></avue-select>
                <!--  <avue-input-tree
                          style="width: 100%"
                          v-model="faultLibForm.deviceId"
                          :node-click="getNodeData"
                          :dic="treeDeptData"
                          :props="defaultProps"
                          :multiple="true"
                          placeholder="请选择设备"
                  />-->
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="适用公司">
                  <avue-input-tree
                          style="width: 100%"
                          v-model="faultLibForm.deptId"
                          :node-click="getCtgNodeData"
                          :dic="treeDeptData"
                          :props="defaultProps"
                          placeholder="请选择适用公司"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="故障类别">
                  <avue-input-tree
                          style="width: 100%"
                          v-model="faultLibForm.faultCategory"
                          :node-click="getCtgNodeData"
                          :dic="regulationTreeData"
                          :props="defaultCtgProps"
                          placeholder="请选择故障类别"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="部位">
                  <el-input v-model="faultLibForm.position" type="text"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="故障描述">
                  <el-input v-model="faultLibForm.faultDescription" type="text"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="故障现象">
                  <el-input v-model="faultLibForm.faultPhenomenon" type="text"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="故障原因">
                  <el-input v-model="faultLibForm.faultCause" type="text"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="解决办法">
                  <el-input v-model="faultLibForm.solution" type="text"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="预防对策">
                  <el-input v-model="faultLibForm.prevention" type="text"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="附件">
              <el-upload
                      ref="upload"
                      :headers="headers"
                      :on-success="handleAvatarSuccess"
                      class="avatar-uploader"
                      action="/admin/sys-file/upload"
                      :on-preview="handlePreview"
                      :on-remove="handleRemove"
                      :before-remove="beforeRemove"
                      multiple
                      :on-exceed="handleExceed"
                      :file-list="fileList"
              >
                <i class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
        </el-form>
      </basic-container>
    </div>
    <div class="btns">
      <el-button  @click="cancelFun">取消</el-button>
      <el-button type="primary" @click="sureFun" v-if="!isView">确定</el-button>
    </div>
  </div>
</template>
<script>
    import avueUeditor from 'avue-plugin-ueditor';
    import store from "@/store";
    import { fetchTree } from "@/api/admin/dept";
    import { getObj, fetchDevicecategoryTree, emsdeviceaccountPage } from "@/api/ems/repository/emsfaultlibrary";
    import { delObj } from "@/api/admin/sys-file";
    export default {
        name: 'Info',
        component:{
            avueUeditor
        },
        data() {
            return {
                fetchDevicecategoryTreeArr: [],
                deviceDicUrl: "/ems/emsdeviceaccount/page?current=1&size=10000",
                emsdeviceaccountPageArr: [],
                fileSuccessList: [],
                fileList: [],
                treeCtgData: [],
                deviceProps: {
                    label: "deviceName",
                    value: "id"
                },
                defaultCtgProps: {
                    label: "name",
                    value: "id"
                },
                treeDeptData: [],
                defaultProps: {
                    label: "name",
                    value: "id"
                },
                options: {
                    //普通图片上传
                    action: "/admin/sys-file/upload",
                    customConfig: {},//wangEditor编辑的配置
                    props: {
                        res: "data",
                        url: "url"
                    }
                },
                avatarUrl: "",
                headers: {
                    Authorization: "Bearer " + store.getters.access_token,
                },
                faultLibForm: {
                    faultNumber: '',
                    faultName: '',
                    applicableDeviceCategory: '',
                    deviceIdsArray: [],
                    deptId: '',
                    position: "",
                    faultDescription: "",
                    faultPhenomenon: '',
                    faultCause: "",
                    solution: '',
                    prevention: '',
                    faultCategory: '',
                    faultLibFilesArray: []
                },
            };
        },
        props: {
            regulationTreeData:{
                type: Array,
                default:() => {
                    return []
                }
            },
            regulationId: {
                type: Number,
                default:() => {
                    return null
                }
            },
            isView: {
                type: Boolean,
                default:() => {
                    return false
                }
            }
        },
        created(){
            this.getDeptTreeList();
            this.fetchDevicecategoryTreeList();
            this.emsdeviceaccountPageList();
        },
        mounted(){
          if(this.regulationId){
              this.getObjFun()
          }else{
              this.faultLibForm = {
                  faultNumber: '',
                  faultName: '',
                  applicableDeviceCategory: '',
                  deviceIdArray: [],
                  deptId: '',
                  position: "",
                  faultDescription: "",
                  faultPhenomenon: '',
                  faultCause: "",
                  solution: '',
                  prevention: '',
                  faultCategory: '',
                  fileIdsArray: [],
              }
              this.fileList = []
          }
        },
        methods: {
            getDeviceCtgFun(){
                return this.faultLibForm.devicesArray && this.faultLibForm.devicesArray.map(item=>{return item.deviceName}).toString()
            },
            // 查询设备类型树
            fetchDevicecategoryTreeList(){
                fetchDevicecategoryTree().then((response) => {
                    this.fetchDevicecategoryTreeArr = response.data.data;
                });
            },
            // 查询设备列表
            emsdeviceaccountPageList(){
                emsdeviceaccountPage({
                    "current": 1,
                    "size":10000
                }).then((res) => {
                    this.emsdeviceaccountPageArr = res.data.data && res.data.data.records;
                });
            },
            // 查询部门树
            getDeptTreeList(){
                fetchTree().then((response) => {
                    this.treeDeptData = response.data.data;
                });
            },
            downloadFun(row){
                window.location.href = row.url
            },
            getObjFun(){
                // 查询故障库详情
                let me = this;
                getObj(this.regulationId).then((res) => {
                    let resData = res.data;
                    me.faultLibForm = resData.data;
                    me.faultLibForm.deviceIdsArray = JSON.parse(me.faultLibForm.deviceId)
                    me.fileList = resData.data.filesArray
                    me.fileList.forEach(item=>{item.name = item.original});
                });
            },
            sureFun(){
                this.$emit('sureFun', this.faultLibForm, this.regulationId)
            },
            cancelFun(){
                this.$emit('cancelFun')
            },
            getCtgNodeData() {
            },
            getNodeData() {
            },
            handleRemove(file, fileList) {
                if (file && file.response && file.response.data) {
                    //在执行删除
                    let { fileId } = file.response.data;
                    const i = this.faultLibForm.fileIdsArray.indexOf(fileId);
                    if(i != -1){
                        this.faultLibForm.fileIdsArray.splice(i, 1);
                        delObj(fileId).then((res) => {
                            this.$message.success("删除成功");
                        });
                    }
                }else{
                    //在执行删除
                    let id = file.id;
                    const i = this.faultLibForm.fileIdsArray.indexOf(id);
                    if(i != -1){
                        this.faultLibForm.fileIdsArray.splice(i, 1);
                        delObj(id).then((res) => {
                            this.$message.success("删除成功");
                        });
                    }
                }
            },
            handlePreview(file) {
                console.log(file);
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) {
                console.log(this.$refs.upload)
                // return this.$confirm(`确定移除 ${ file.fileName }？`);
            },
            handleAvatarSuccess(res, file) {
               this.faultLibForm.fileIdsArray.push(res.data.fileId)
                console.log(res, file)
                // this.avatarUrl = URL.createObjectURL(file.raw);
            },
        }
    };
</script>
<style scoped="scoped" lang="scss">
.faultLibInfo{
  .btns{
    text-align: right;
  }
  .view{
    .lxjgz,.xgfj,.sysb{
     /* border:1px solid #E0E8F2;*/

    }
    .tt{
      .title{
        font-size: 16px;
        font-weight: bold;
      }
      .time{
        text-align: center;
        margin: 15px 0;
      }
    }
    p.gnTitle{
      font-size: 20px;
      font-weight: bold;
      margin: 30px 0 15px;
    }
  }
  .lxjgz{
    .content{
      table{
        border-collapse:collapse; //表格单元格间距样式
        border:1px solid #ebeef5;
        width: 100%;
        tr{
          border:1px solid #ebeef5;
          height:30px;
          td{
            border:1px solid #ebeef5;
            text-align:center;
            color: #909399;
            font-weight: 600;
            font-size: 12px;
          }
          td.subData {
            font-weight: 500;
            color: #606266;
            min-width: 50px;
            max-width: 300px;
            word-break: break-all;
            /* word-break:keep-all;
             white-space:nowrap;
             overflow:hidden;
             text-overflow:ellipsis;*/
          }
          th{
           /* font-weight: 400;*/
          }
        }
      }
    }
  }
}
</style>